<template>
  <div class="order-list-page">
    <!-- 顶部导航 -->
    <NavBar>
      <template #default>
        我的订单
      </template>
    </NavBar>

    <!-- 状态筛选栏 -->
    <div class="status-filter">
      <div
        v-for="tab in tabs"
        :key="tab.status"
        class="filter-tab"
        :class="{ 'active': activeStatus === tab.status }"
        @click="changeStatus(tab.status)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="order-container">
      <div v-if="isLoading" class="loading">加载中...</div>
      <div v-else-if="orders.length === 0" class="empty">暂无订单</div>

      <div v-else v-for="order in orders" :key="order.id" class="order-item">
        <!-- 订单项内容 -->
        <div class="order-header">
          <span>订单编号: {{ order.orderId }}</span>
          <span class="status">{{ getStatusText(order.orderStatus) }}</span>
        </div>

        <div class="order-goods">
          <!-- 商品展示 -->
          <div v-for="item in order.items" :key="item.id" class="goods-item">
            <img :src="item.productDTO.mainImage" class="goods-image">
            <div class="goods-info">
              <div class="goods-name">{{ item.productDTO.productName }}</div>
              <!-- <div class="goods-spec">{{ item.spec }}</div> -->
              <div class="goods-price">¥{{ item.productDTO.price }} x {{ item.quantity }}</div>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <div class="total-amount">共{{ order.itemCount }}件商品 合计: ¥{{ order.totalAmount }}</div>
          <div class="actions">
            <button
              v-if="order.status === 1"
              class="pay-btn"
              @click="payOrder(order.id)"
            >
              去支付
            </button>
            <button class="action-btn" @click="viewOrderDetail(order.orderId)">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NavBar from '@/components/common/NavBar.vue'
import { useOrderStore } from '@/stores/orderStore'
import { useUserStore } from '@/stores/userStore'

const route = useRoute()
const router = useRouter()
const orderStore = useOrderStore()
const userStore = useUserStore()

// 状态选项卡配置
const tabs = [
  { label: '全部', status: null },
  { label: '待付款', status: 1 },
  { label: '待发货', status: 2 },
  { label: '待收货', status: 3 },
  { label: '待评价', status: 4 },
  { label: '退款/售后', status: 5 }
]

// 当前激活的状态
const activeStatus = ref(null)
const orders = ref([])
const isLoading = ref(false)

// 从路由参数获取初始状态
onMounted(() => {
  const status = route.query.status
  if (status) {
    activeStatus.value = Number(status)
  }
  fetchOrders()
})

// 监听状态变化
watch(activeStatus, () => {
  fetchOrders()
})

// 获取订单列表
const fetchOrders = async () => {
  isLoading.value = true
  try {
    if (activeStatus.value) {
      // 获取特定状态的订单
      orders.value = await orderStore.fetchOrdersByUserAndStatus(userStore.userAccount.userId, activeStatus.value)
    } else {
      // 获取全部订单
      orders.value = await orderStore.fetchOrdersByUserAndStatus(userStore.userAccount.userId)
    }
  } catch (error) {
    console.error('获取订单失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 切换状态
const changeStatus = (status) => {
  activeStatus.value = status
  // 更新URL但不重新加载页面
  router.replace({
    query: status ? { status } : {}
  })
}

// 获取状态文本
const getStatusText = (status) => {
  const map = {
    1: '待付款',
    2: '待发货',
    3: '待收货',
    4: '待评价',
    5: '退款/售后',
    0: '已取消'
  }
  return map[status] || ''
}

// 支付订单
const payOrder = (orderId) => {
  // 支付逻辑
  console.log('支付订单:', orderId)
}

const viewOrderDetail = (orderId) => {
  router.push(`/order/detail/${orderId}`)
}
</script>

<style scoped>
.order-list-page {
  padding-bottom: 60px;
}

.status-filter {
  display: flex;
  overflow-x: auto;
  padding: 10px 0;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.filter-tab {
  flex: 0 0 auto;
  padding: 8px 15px;
  margin: 0 5px;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.filter-tab.active {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

.order-container {
  padding: 10px;
}

.order-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}

.status {
  color: #ff6700;
}

.order-goods {
  padding: 10px 0;
}

.goods-item {
  display: flex;
  margin-bottom: 10px;
}

.goods-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.goods-info {
  flex: 1;
  padding-left: 10px;
}

.goods-name {
  font-size: 14px;
  margin-bottom: 5px;
}

.goods-spec {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.goods-price {
  font-size: 14px;
  color: #ff6700;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}

.total-amount {
  font-size: 14px;
}

.actions {
  display: flex;
}

.action-btn, .pay-btn {
  padding: 6px 12px;
  margin-left: 10px;
  border-radius: 15px;
  font-size: 12px;
  border: 1px solid #ddd;
  background: #fff;
}

.pay-btn {
  border-color: #ff6700;
  color: #ff6700;
}

.loading, .empty {
  text-align: center;
  padding: 20px;
  color: #999;
}
</style>